<template>
	<div class="panel-content">
		<h1>间隙环形图</h1>
		<p>方法一：给每个data加边框，边框颜色和echarts所在的背景一样</p>
		<div ref="chart1" style="width: 400px; height: 400px"></div>
		<p>
			方法二：给每个数据中插入颜色为透明的假数据，注意：假数据要根据真实数据动态调整
		</p>
		<div ref="chart2" style="width: 400px; height: 400px"></div>
	</div>
</template>

<script>
import { init } from 'echarts';

export default {
	name: 'DualRingChart',
	mounted() {
		this.initChart();
	},
	methods: {
		initChart() {
			const myChart = init(this.$refs.chart1);
			const option = {
				backgroundColor: 'transparent',
				color: [
					'#3060ff',
					'#44c6fe',
					'#ffc455',
					'#25dd96',
					'#25cedd',
					'#4AEAB0'
				],
				tooltip: {
					trigger: 'item',
					formatter: function (params) {
						const color = params.color;
						const dotHtml =
							'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
							color +
							'"></span>';

						return dotHtml + params.name + '：' + params.value + ' 台';
					}
				},
				title: [
					{
						text: '{val|0}\n{name|异常总数}',
						top: 'center',
						left: 'center',
						textStyle: {
							rich: {
								//自定义样式
								name: {
									fontSize: 12,
									fontWeight: 'normal',
									color: '#999'
								},
								val: {
									fontSize: 38,
									fontWeight: 'bold',
									color: 'white'
								}
							}
						}
					}
				],
				series: [
					{
						//主体圆环，带颜色部分
						type: 'pie',
						radius: ['47%', '72%'],
						center: ['50%', '50%'],
						data: [
							{
								name: '总体振动',
								value: '4'
							},
							{
								name: '噪声声压',
								value: '4'
							},
							{
								name: '表面温度',
								value: '2'
							},
							{
								name: '表面温升',
								value: '2'
							},
							{
								name: '其他',
								value: '4'
							}
						],
						z: 666,
						hoverAnimation: true,
						itemStyle: {
							//圆环部分的样式
							normal: {
								borderColor: '#242e43',
								borderWidth: 20 // 关键点，圆环间隙
							}
						},
						labelLine: {
							// 每段环延伸出去的线条
							length: 5, //第一段折线的长度
							length2: 40, //第二段折线的长度
							lineStyle: {
								type: 'dashed',
								cap: 'round'
							}
						},
						label: {
							// 每段圆环延伸出去的文字说明
							normal: {
								formatter: function (params) {
									if (params.name !== '') {
										return (
											'{name|' +
											params.name +
											'}' +
											'\n' +
											'{value|' +
											params.percent +
											'%}'
										);
									} else {
										return '';
									}
								},
								rich: {
									name: {
										fontSize: 12,
										color: '#999',
										lineHeight: 20
									},
									value: {
										fontSize: 12,
										color: 'white'
									}
								}
							}
						}
					},
					{
						//最外层圆环 装饰用，不用来统计数据
						type: 'pie',
						radius: ['83%', '100%'],
						hoverAnimation: false,
						name: '',
						label: {
							show: false
						},
						labelLine: {
							show: false
						},
						data: [
							{
								name: '',
								value: 0,
								itemStyle: {
									normal: {
										color: '#2f3e65'
									}
								}
							}
						],
						tooltip: {
							formatter: function () {
								return '';
							}
						}
					},
					{
						//最内层圆形，有渐变效果，用于图表装饰
						type: 'pie',
						radius: ['0%', '55%'],
						hoverAnimation: false,
						name: '',
						label: {
							show: false
						},
						labelLine: {
							show: false
						},
						data: [
							{
								name: '',
								value: 0,
								itemStyle: {
									// 给圆设置渐变色
									color: {
										type: 'radial', //径向渐变
										x: 0.5,
										y: 0.5,
										r: 0.5,
										colorStops: [
											{
												offset: 0.5,
												color: 'rgba(40, 66, 133, 0)' // 0% 处的颜色
											},
											{
												offset: 1,
												color: '#284285' // 100% 处的颜色 #284285 rgba(255,255,255, 0)
											}
										]
									}
								}
							}
						],
						tooltip: {
							formatter: function () {
								return '';
							}
						}
					}
				]
			};

			myChart.setOption(option);

			// 方法二
			const chartTest = init(this.$refs.chart2);
			const data = {
				title: {
					//圆环中间显示文本
					text: '2678',
					left: 'center',
					top: '30%',
					padding: [0, 0],
					textStyle: {
						//自己的字的样式
						color: '#fff',
						fontSize: 28,
						letterSpacing: '18px',
						align: 'center'
					},
					subtext: '{a|工单总数}',
					subtextStyle: {
						//数据的样式
						rich: {
							a: {
								color: '#FFF',
								lineHeight: 40,
								fontSize: 16
							}
						}
					}
				},
				series: [
					{
						hoverAnimation: false, //取消 echart 环形图鼠标放置放大的效果
						type: 'pie', //类型为圆环
						radius: ['80%', '100%'], //圆环大小
						center: ['50%', '50%'], //圆环位置
						avoidLabelOverlap: true, //是否启用防止标签重叠策略 防止标签多了重叠在一起

						emphasis: {
							disabled: false, //放上去的高亮及其他动画全部停止
							scale: false, //允许放上去放大
							scaleSize: 10, //移动上去后的放大比例
							focus: 'none' //self移上去后其他消失 series显示同系列的
						},
						label: {
							//每个环旁边自带的文字叙述
							show: false,
							color: '#fb5477'
						},
						data: [
							{
								value: 633,
								itemStyle: { normal: { color: '#FD5557' } }
							},
							{
								value: 5,
								//这里的5是按照总值/50计算出来的，背景色为透明
								itemStyle: { normal: { color: 'rgba(0,0,0,0)' } }
							},
							{
								value: 88,

								itemStyle: { normal: { color: '#FCCD27' } }
							},
							{
								value: 5,
								//这里的5是按照总值/50计算出来的，背景色为透明
								itemStyle: { normal: { color: 'rgba(0,0,0,0)' } }
							},
							{
								value: 88,

								itemStyle: { normal: { color: '#0AF79E' } }
							},
							{
								value: 5,
								//这里的5是按照总值/50计算出来的，背景色为透明
								itemStyle: { normal: { color: 'rgba(0,0,0,0)' } }
							},
							{
								value: 88,

								itemStyle: { normal: { color: '#2993F4' } }
							},
							{
								value: 5,
								// 这里的5是按照总值/50计算出来的，背景色为透明
								itemStyle: { normal: { color: 'rgba(0,0,0,0)' } }
							}
						]
					}
				]
			};

			chartTest.setOption(data);
		}
	}
};
</script>

<style scoped>
.panel-content {
	margin: 50px auto;
	display: inline-block;
}
.panel-content > div {
	padding: 20px;
	background-color: #0e1824;
}
.panel-content > p {
	text-align: left;
}
</style>
